<template>
  <div class="LoginComponent_container">
    <div v-if="!WxLoginShow">
      <div class="login_container_right_main_input">
        <el-input v-model="loginForm.username" placeholder="请输入账号" @keyup.enter.native="handleLogin" />
      </div>
      <div class="login_container_right_main_input2">
        <el-input v-model="loginForm.password" placeholder="请输入密码" show-password @keyup.enter.native="handleLogin" />
      </div>
      <div class="login_container_right_main_operate">
        <a v-if="codeStatus" class="login_container_right_main_operate_verifyLogin" @click="typeChange('2')">验证码登录</a>
      <!--      <a class="login_container_right_main_operate_forget" @click="typeChange('3')">忘记密码？</a>-->
      </div>
      <div class="login_container_right_main_button">
        <el-button @click.native="handleLogin">登录</el-button>
      </div>
    </div>
    <div v-show="codeStatus&&WxLoginShow" id="login_containers" />
    <div v-if="codeStatus" class="icon">
      <svg-icon v-if="!WxLoginShow" icon-class="微信图标" @click.native="wxScan" />
      <svg-icon v-else style="margin-top:20px" icon-class="账号图标" @click.native="account" />
    </div>
    <div v-if="codeStatus" class="login_container_right_main_register">
      没有账号？
      <a class="login_container_right_main_register_register" @click="typeChange('4')">注册账号</a>
    </div>
  </div>
</template>

<script>
import { getCodeStatus } from '@/api/common/login'
import './wx'
export default {

  name: 'LoginComponent',
  data() {
    return {
      WxLoginShow: false,
      codeStatus: '', // 短信状态
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  created() {
    this.getCodeStatus()
  },
  mounted() {
    this.wxLogin()
  },
  destroyed() {
  },
  methods: {
    // 二维码展示
    wxLogin() {
      // const oScript = document.createElement('script')
      // oScript.type = 'text/javascript'
      // oScript.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
      // document.body.appendChild(oScript)
      var obj = new WxLogin({
        self_redirect: false,
        id: 'login_containers',
        appid: 'wxd71572b7dc0dfc36',
        scope: 'snsapi_login',
        redirect_uri: encodeURIComponent('https://ims.cascadeiot.com'),
        // https://wechatdemo2.wssn.fun/
        state: 'A123DC35165464',
        style: 'black',
        href: 'data:text/css;base64,LmltcG93ZXJCb3ggLm5vcm1hbFBhbmVse21hcmdpbi10b3A6IDE1cHg7fQouaW1wb3dlckJveCAucXJjb2RlIHt3aWR0aDogMjMwcHg7Ym9yZGVyLWNvbG9yOiNDNUUxRkY7fQouaW1wb3dlckJveCAudGl0bGUge2Rpc3BsYXk6IG5vbmU7fQ=='
      })
    },
    // 微信扫码登录
    wxScan() {
      this.WxLoginShow = true
      // window.location.href = 'https://open.weixin.qq.com/connect/qrconnect?appid=wxd71572b7dc0dfc36&redirect_uri=https://wechatdemo2.wssn.fun&response_type=code&scope=snsapi_login'
    },
    // 账号登录
    account() {
      this.WxLoginShow = false
    },
    // 获取验证码使用状态
    async getCodeStatus() {
      const data = await getCodeStatus()
      this.$store.dispatch('user/getCodeStatus', data.data)
      this.codeStatus = this.$store.state.user.codeStatus
      // this.codeStatus = false
    },
    checkForm() {
      if (!this.loginForm.username) {
        this.$message({
          message: '请输入用户名',
          type: 'warning'
        })
        return false
      }
      if (!this.loginForm.password) {
        this.$message({
          message: '请输入密码',
          type: 'warning'
        })
        return false
      }
      return true
    },
    handleLogin() {
      if (this.checkForm()) {
        this.loading = true
        const cacheLoginForm = this.$deepClone(this.loginForm)
        this.$store.dispatch('user/logout')
        this.$store.dispatch('user/login', cacheLoginForm)
          .then(() => {
            if (this.loginForm.username == 'superadmin') {
              this.$router.push(`/`)
            } else {
              this.$router.push({
                path: this.redirect || '/workStation',
                // path: this.redirect || '/',
                query: this.otherQuery
              })
            }
          }).finally(() => {
            this.loading = false
          })
      }
    },
    typeChange(type) {
      this.$parent.typeChange(type)
    }
  }
}
</script>

<style lang="less" scoped>
#login_containers{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 21px;
  // margin-top: 1px;
}
.normalPanel{
  margin-top: 0 !important;
}
.icon{
  display: flex;
  justify-content: center;
  margin-top: 20px;
/deep/.svg-icon{
  height: 40px;
  width: 40px;
}
}

.LoginComponent_container {
  width: 100%;
  height: 100%;

  .login_container_right_main_input {
    margin-top: 60px;
  }

  .login_container_right_main_input2 {
    margin-top: 20px;
  }

  .login_container_right_main_operate {
    display: flex;
    justify-content: space-between;
    color: rgba(57, 125, 255, 1);
    font-size: 15px;
    margin-top: 20px;
  }

  .login_container_right_main_button {
    margin-top: 60px;

    /deep/ .el-button {
      width: 100%;
      height: 40px;
      background-color: rgba(57, 125, 255, 1);
      border-radius: 8px;
      border: 0px;
    }

    /deep/ .el-button:hover {
      background-color: rgba(57, 125, 255, 0.8);
    }
  }

  .login_container_right_main_register{
    margin-top: 60px;
    display: flex;justify-content: center;align-items: center;
    font-size: 15px;
    color: rgba(153, 153, 153, 1);
    .login_container_right_main_register_register{
      color: rgba(57, 125, 255, 1);
    }
  }
}

/deep/ .el-input__inner {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(231, 234, 243, 0.6);
  padding-left: 20px;
  border: 0px;

}

/deep/ .el-input__icon {
  line-height: 40px;
}

/deep/ .el-input__inner::placeholder {
  color: rgba(51, 51, 51, 0.6);
}
</style>

